<template>
  <!-- 顾客账单管理 -->
  <!-- <div>顾客账单管理</div> -->
  <div class="Custome_Bill_Mangement">
    <!-- Custome_Bill_Management -->
    <div class="Custome_Bill_Mangement_Search">
      <!-- <span class="demonstration">带快捷选项</span> -->
      <el-date-picker
        v-model="searchForm.time"
        clearable
        value-format="timestamp"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      />

      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item>
          <el-select
            v-model="searchForm.type"
            clearable
            placeholder="请选择类型"
          >
            <el-option label="充值" value="充值" />
            <el-option label="消费" value="消费" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="searchForm.status"
            clearable
            placeholder="请选择状态"
          >
            <el-option label="正常" value="正常" />
            <el-option label="未审核" value="未审核" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="searchForm.userId"
            clearable
            placeholder="顾客编号"
          >
            <!-- <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option> -->

            <el-option
              v-for="item in categoryData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="Custome_Bill_Management_Form">
      <el-table
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="id" label="编号" width="150" />
        <el-table-column
          prop="transferMoney"
          label="交易金额"
          width="180"
        />

        <el-table-column
          prop="transferTime"
          :formatter="formatDate"
          label="交易时间"
          width="200"
        />

        <el-table-column
          prop="type"
          label="交易类型"
          width="180"
        />
        <el-table-column prop="status" label="状态" width="180">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              :type="scope.row.status == '正常' ? 'success' : 'danger'"
            >{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
        <!-- <el-table-column prop="address" label="地址"></el-table-column> -->
      </el-table>
    </div>

    <div class="Custome_Bill_Management_Page">
      <!-- <span class="demonstration">完整功能</span> -->

      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20, 30, 50, 100]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { pageQueryCustomerAccount } from '@/api/account'
// 重命名
// import { pageQuery as pageQueryPro } from "@/api/product";

export default {
  data() {
    return {
      categoryData: [],

      searchForm: {
        type: '',
        status: '',
        userId: ''
      },

      tableData: [],

      total: 0,

      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      // value2: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]

      searchForm: {
        user: '',
        region: ''
      },
      params: {
        page: 1,
        pageSize: 10
      }
    }
  },
  computed: {},
  watch: {
    // 深度监听分页参数
    params: {
      handler() {
        this.queryData()
      },
      deep: true
    }
  },
  created() {
    this.queryCategoryData()
    this.queryData()
  },
  mounted() {},
  methods: {
    // handleClick(){//将当前时间转换为时间戳
    //   var date = new Date( this.getTimes );
    //     // 有三种方式获取
    //   this.timestamp = date.getTime();//会精确到毫秒
    //   var time2 = date.valueOf();//会精确到毫秒
    //   var time3 = Date.parse(date);//只能精确到秒，毫秒用000替代
    //   console.log(time2);//1398250549123
    //   console.log(time3);//1398250549000
    // },

    // 13位时间戳转换成时间
    formatDate(row, column) {
      const date = new Date(parseInt(row.transferTime))
      const Y = date.getFullYear() + '-'
      const M =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1) + '-'
          : date.getMonth() + 1 + '-'
      const D =
        date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
      const h =
        date.getHours() < 10
          ? '0' + date.getHours() + ':'
          : date.getHours() + ':'
      const m =
        date.getMinutes() < 10
          ? '0' + date.getMinutes() + ':'
          : date.getMinutes() + ':'
      const s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    },

    //  timestampToTime (row, column) {
    //   var date = new Date(row.transferTime) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    //   var Y = date.getFullYear() + '-'
    //   var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
    //   var D = date.getDate() + ' '
    //   var h = date.getHours() + ':'
    //   var m = date.getMinutes() + ':'
    //   var s = date.getSeconds()
    //   return Y+M+D+h+m+s
    //   // console.log(timestampToTime (1533293827000))
    // },

    async queryCategoryData() {
      const res = await pageQueryCustomerAccount({ page: 1, pageSize: 100 })
      // console.log(res.data.list);
      this.categoryData = res.data.list
    },

    async queryData() {
      this.loading = true
      // let temp = {
      //   ...this.params,
      //   ...this.searchForm,
      // };
      // // 遍历对象
      // for (let key in temp) {
      //   if (!temp[key]) {

      //     delete temp[key];
      //   }
      // }

      // const tempObj = { ...this.searchForm }
      // // 对时间进行处理为后台需要的数据
      // if (tempObj.time) {
      //   tempObj.beginTime = tempObj.time[0]
      //   tempObj.endTime = tempObj.time[1]
      //   delete tempObj.time

      // }

      // let res = await pageQueryCustomerAccount(temp);
      // // 加载完毕
      // this.loading = false;
      // this.tableData = res.data.list;
      // this.total = res.data.total;

      for (const key in this.searchForm) {
        if (!this.searchForm[key]) {
          delete this.searchForm[key]
        }
      }
      const tempObj = { ...this.searchForm }
      // 对时间进行处理为后台需要的数据
      if (tempObj.time) {
        tempObj.beginTime = tempObj.time[0]
        tempObj.endTime = tempObj.time[1]
        delete tempObj.time
      }
      const res = await pageQueryCustomerAccount({
        ...this.params,
        ...tempObj
      })
      this.tableData = res.data.list
      this.total = res.data.total
      this.loading = false
    },
    // 查询按钮点击事件处理程序

    toSearch() {
      // console.log('submit!');
      this.params.page = 1
      this.queryData()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params = {
        page: 1,
        pageSize: val
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
    }
  }
}
</script>
<style lang="scss" scoped>
.Custome_Bill_Mangement_Search {
  display: flex;
}
.demo-form-inline {
  margin-left: 15px;
}
.Custome_Bill_Management_Page {
  float: right;
}
</style>
